<template>
  <div>
    <el-pagination
      v-model:currentPage="pageInfo.current"
      v-model:page-size="pageInfo.size"
      :page-sizes="[20, 30, 50]"
      :background="true"
      layout="total, sizes, prev, pager, next"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, defineEmits, defineExpose } from 'vue'
// 定义 change 事件，改变条数或者页数的时候触发该事件
const emits = defineEmits(['change'])

// 分页信息
const pageInfo = ref({
  current: 1,
  size: 10,
  total: 0,
})

// 改变每页条数
function handleSizeChange(val) {
  pageInfo.value.size = val
  emits('change', pageInfo.value)
}

// 改变当前页数
function handleCurrentChange(val) {
  pageInfo.value.current = val
  emits('change', pageInfo.value)
}
// 修改总数, 每页条数
function changeTotal(total, size) {
  pageInfo.value.total = Number.parseInt(total || '0')
  pageInfo.value.size = Number.parseInt(size || '10')
}

// 父组件调用 changeTotal 方法将 total 传进来
defineExpose({ changeTotal })
</script>

<style lang="scss" scoped></style>
